<template>
  <div>
    <table border="2" width="600" height="100" align="center">
      <caption>
        <h3>欢迎光临_vue开发的收银系统_水果店</h3>
      </caption>
      <thead>
        <tr>
          <th>苹果 10 ¥/斤，折扣&lt; 8折 &gt;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            请输入你要购买的斤数
            <input type="number" v-model="num" />
          </td>
        </tr>
        <tr>
          <td>
            <button @click="btn">结账买单~</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>
            结账单：总价:¥{{ sum }}元 折后价：¥{{ zheh }}元 省了：¥{{ zui }}元
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      sum: "",
      zheh: "",
      zui: "",
    };
  },
  methods: {
    btn() {
      this.sum = this.num * 10;
      this.zheh = this.sum * 0.8;
      this.zui = this.sum - this.zheh;
    },
  },
};
</script>

<style lang="less">
</style>
